<template>
  <DetailPanner>
    <template #left>
      <span style="margin-left: 20px;">图片</span>
    </template>
    <template #main>
      <section v-if="result?.url" class="panner noDrag">
        <el-icon class="icons" @click="change(0)">
          <ArrowLeftBold />
        </el-icon>
        <img :src="item" alt="" v-for="(item, index) in result.imgs" v-show="(result.index === index)">
        <el-icon class="icons right" @click="change(1)">
          <ArrowRightBold />
        </el-icon>
      </section>
    </template>
    <template #action>
      <TopAction fixed @select="actionHandel" custom :show="[0, 1, 2]" />
    </template>
  </DetailPanner>
</template>
<script>
import { defineComponent, onMounted, watch, ref, computed } from 'vue';
import DetailPanner from '@/components/DetailPanner.vue'
import TopAction from '@/components/TopAction.vue';

export default defineComponent({
  components: {
    DetailPanner,
    TopAction
  },
  setup () {
    const result = ref({})
    onMounted(() => {
      window.electronAPI.getMsg(async (event, value) => {
        result.value = value
      })
    })
    const actionHandel = (index) => {
      const handle = window.electronAPI.windowAction
      const api = {
        0: () => {
          handle(JSON.stringify({ action: 'setSkipTaskbar', id: result.value.id, params: false }))
          handle(JSON.stringify({ action: "minimize", id: result.value.id }))
        },
        1: async () => {
          const res = await handle(JSON.stringify({ action: 'isMaximized', id: result.value.id }))
          !res ? handle(JSON.stringify({ action: 'maximize', id: result.value.id })) : handle(JSON.stringify({ action: 'unmaximize', id: result.value.id }))
          // handle(JSON.stringify({ action: "minimize", id: result.value.id }))
        },
        2: () => {
          handle(JSON.stringify({ action: "close", id: result.value.id }))
        }
      }
      Reflect.get(api, index)()
    }
    const change = (i) => {
      const { index, imgs } = result.value
      if (i === 0) {
        index - 1 < 0 ? result.value.index = imgs.length - 1 : result.value.index -= 1
      }
      if (i === 1) {
        index + 1 > imgs.length - 1 ? result.value.index = 0 : result.value.index += 1
      }
    }
    return {
      result,
      change,
      actionHandel
    }
  }
})
</script>

<style scoped lang="less">
.panner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  background-color: #fff;

  img {
    max-height: 100%;
  }
}

.icons {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;

  &.right {
    left: auto;
    right: 5%;
  }
}
</style>
